<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="empNo"
                    label="编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="ename"
                    label="姓名"
                    >
            </el-table-column>
            <el-table-column
                    prop="job"
                    label="岗位"
                    >
            </el-table-column>
            <el-table-column
                    prop="mgr"
                    label="领导编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="hiredate"
                    label="入职日期"
                    >
            </el-table-column>
            <el-table-column
                    prop="sal"
                    label="薪水"
                    >
            </el-table-column>
            <el-table-column
                    prop="dept.dname"
                    label="部门"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="delemp(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                tableData:[],
                total:0,
                pageSize:5,
                currentPage:1,
            }
        },
        // 页面加载完毕后执行方法
        created(){
            this.initTable()
        },
        // 自定义的方法
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.initTable();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.initTable();
            },
            initTable() {
                this.$http.get("/emp/getAll/" + this.currentPage + "/" + this.pageSize).then(result => {
                    console.log(result.data.data);
                    this.tableData = result.data.data.records;
                    this.total = result.data.data.total;
                })

            },
            delemp(row) {
                let empNo = row.empNo;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/emp/del/" + empNo).then(result => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.initTable();

                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
        }
    }
</script>

<style scoped>

</style>